<template>
  <div class="app_content" style="margin-top: -20px;">
  <!-- 导入表 -->
  <el-form :inline="true" ref="queryForm" :model="queryParams" class="demo-form-inline" :size="size" v-if="showSearch">
      <el-form-item label="表名称" prop="tableName">
        <el-input
          v-model="queryParams.tableName"
          placeholder="请输入表名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="表描述" prop="tableComment">
        <el-input
          v-model="queryParams.tableComment"
          placeholder="请输入表描述"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button  @click="resetSubmit"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-redo'"/>重置</el-button>
          <el-button type="primary" @click="querySubmit"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-search'"/>查询</el-button>
      </el-form-item>
    </el-form>
          <el-row :gutter="10" class="mb8" style="margin-bottom: 10px;">
           
            <RightToolbar :showSearch="showSearch" @queryTable='getList' @showSearchClick='showSearchClick' :columns="columns"/>
          </el-row>
     <el-table @row-click="clickRow" ref="tableRef" :data="dbTableList" @selection-change="handleSelectionChange" :height="maxHeight"  :border="$border" style="width: 100%" :size="size">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true" key="tableName"></el-table-column>
        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true" key="tableComment"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" key="createTime"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" key="updateTime"></el-table-column>
      </el-table>
      <div style="margin-top:10px;position: absolute;right: 0;margin-right:20px">
              <el-pagination
                v-model:currentPage="queryParams.pageNum"
                v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 30, 40]"
                :small="small"
                :disabled="disabled"
                :background="background"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
          </div>
        <div  class="dialog-footer" style="position: absolute;bottom: 0;right: 0;margin-bottom: 20px;margin-right: 20px;">
        <el-button type="primary" @click="handleImportTable" :size="size"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-correct'"/>确 定</el-button>
        <el-button @click="handleBack" :size="size"><component :theme="iconTheme" :size="iconSize" :strokeWidth="iconStrokeWidth" :is="'icon-return'"/>取 消</el-button>
      </div>
  </div>
</template>

<script>
import RightToolbar from '@/components/RightToolbar/index.vue';
import { listDbTable, importTable } from "@/api/tool/gen";
import { computed, ref ,reactive,onMounted,getCurrentInstance,toRefs,nextTick} from 'vue'
import { useStore } from 'vuex';
import { useI18n } from 'vue-i18n';
import {
Delete,
Edit,
Plus
} from '@element-plus/icons-vue'
export default defineComponent({
  components:{
    RightToolbar
  },
  props:{

  },
setup(props,context){
  const { proxy } = getCurrentInstance();//关键代码
  const queryForm=ref(null)
  const tableRef=ref(ElTable)
  const formDataRef=ref(null)
  const { t } = useI18n();
  const store = useStore();
  const staticData=reactive({
    maxHeight: store.getters['setting/mode']=='horizontal'?document.body.clientHeight - 300:store.getters['setting/isFullScreen']!=false ?document.body.clientHeight - 360:document.body.clientHeight - 380 ,
    background:false,
    disabled :false,
    // 遮罩层
    visible: false,
    // 显示搜索条件
    showSearch: true,
    // 选中数组值
    tables: [],
    // 总条数
    total: 0,
    // 表数据
    dbTableList: [],
    // 查询参数
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      tableName: undefined,
      tableComment: undefined
    },
    
    // 列信息
    columns: [
      { key: 0, label: `表名称`, visible: true },
      { key: 1, label: `表描述`, visible: true },
      { key: 2, label: `创建时间`, visible: true },
      { key: 3, label: `更新时间`, visible: true },

      
    ],

  })
  const size = computed(() => {
        return store.getters['setting/size'];
  });

  const small =computed(() => {
    return size.value=='small'?true:false
  });
   onMounted(() => {  
    proxy.show()
  })
  const methods={
    // 显示弹框
    show() {
      proxy.getList();
      staticData.visible = true;
    },
    clickRow(row) {
      tableRef.value.toggleRowSelection(row)
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      staticData.tables = selection.map(item => item.tableName);
    },
    // 查询表数据
    getList() {
      listDbTable(staticData.queryParams).then(res => {
        if (res.code === 200) {
          staticData.dbTableList = res.rows;
          staticData.total = res.total;
        }
      });
    },
    /** 取消按钮操作 */
    handleBack(){
      staticData.visible = false;
      tableRef.value.clearSelection()
      context.emit("handleBack");
    },
    /** 导入按钮操作 */
    handleImportTable() {
      const tableNames = staticData.tables.join(",");
      if (tableNames == "") {
        proxy.Error("请选择要导入的表");
        return;
      }
      importTable({ tables: tableNames }).then(res => {
        proxy.Success(res.msg);
        if (res.code === 200) {
          staticData.visible = false;
          context.emit("ok");
        }
      });
    },
    /**
      * 显示或隐藏搜索条件
      **/
    showSearchClick(data){
      staticData.showSearch=data
    },
    resetSubmit(){
      staticData.dateRange=[]
      queryForm.value.resetFields();
      proxy.getList()
    },
    querySubmit(){
      staticData.queryParams.pageNum = 1;
      proxy.getList()
    },
    handleSizeChange (val) {
      console.log(`${val} items per page`)
      staticData.queryParams.pageSize =val;
      proxy.getList()
    },
    handleCurrentChange(val){
      console.log(`current page: ${val}`)
      staticData.queryParams.pageNum =val;
      proxy.getList()
    }
   }
    return {
      Delete,
      Edit,
      Plus,
      size,
      small,
      tableRef,
      queryForm,
      formDataRef,
      ...methods,
      ...toRefs(staticData)
    }
}


})
</script>
